<template>
  <div class="reg">
    <div class="header">
      <mu-appbar title="Title">
        <mu-flat-button label="注册" slot="default"/>
      </mu-appbar>
    </div>
    <div class="content">
      <mu-text-field label="帐号" labelFloat name="username" v-model="username"/>
      <br/>
      <mu-text-field label="昵称" labelFloat name="nickname" v-model="nickname"/>
      <br/>
      <mu-text-field label="密码" type="password" labelFloat name="password" v-model="password"/>
      <br/>
      <mu-raised-button label="注册" fullWidth @click="reg()" v-bind:disabled="!(username && password)" primary/>
      <div @click="login()">
        登录
      </div>
    </div>
  </div>
</template>

<script>
  //  import {mapGetters} from 'vuex'
  import axios from 'axios'
  import qs from 'qs'
  import {save} from '../util/cache'

  export default{
    data() {
      return {
        username: '',
        password: '',
        nickname: ''
      }
    },
    methods: {
      reg() {
        axios.post('http://im.fanggongxin.net/user/reg', qs.stringify({
          username: this.username,
          password: this.password,
          nickname: this.nickname,
          headimg: 'http://wx.qlogo.cn/mmopen/Q3auHgzwzM6KJmuSbbB4Int2g8hQzCQd5N0beapQzt008t5LgVALAf4CT6EhyCtLSktgeoaxW41ibKsftM9C4TA/0'
        }))
          .then((response) => {
            window.alert('注册成功');
            this.$router.push('/login');
          })
          .catch((error) => {
            console.log(error);
          });
      },
      login() {
        this.$router.push('/login');
      }
    },
    computed: {

    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .reg
    position: absolute
    left: 0
    right: 0
    top: 0
    bottom: 0
    background: #fff
    .mu-appbar
      text-align: center
      .mu-flat-button-label
        font-size: 20px
    .content
      padding-top 160px
      width: 80%
      margin: 20px auto
      .mu-text-field
        width: 100%
      .mu-raised-button
        min-width: 80px
        display: block
        width: 100%
        margin: 0 auto
        transition: all 0.375s
        &.loading
          width: 80px
          height: 80px
          border-radius: 50%
</style>
